import React, { useState, createRef } from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Tabs } from 'react-vant'

import TakeNote from '../component/TakeNote'
import Recharge from '../component/Recharge'
import Balance from '../component/Balance'

import { VolumeO } from '@react-vant/icons'
import { NoticeBar } from 'react-vant'
export default function PhoneRecharge() {

    const navigate = useNavigate();
    return (
        <>

            <NavBar onBack={() => { navigate("/Lifepay") }}>充值中心</NavBar>
            <NoticeBar
                leftIcon={<VolumeO />}
                text='充50送1元冲100送2元 活动优惠,无月租、无最低消费、打多少扣多少,一个月打一毛就只扣一 毛,不打不扣一分钱'
            />
            <Tabs border type='capsule'>
                    <Tabs.TabPane key={1} title={'电话充值'}>
                         <Recharge></Recharge> 
                    </Tabs.TabPane>
                    <Tabs.TabPane key={2} title={'余额查询'}>
                         <Balance></Balance> 
                    </Tabs.TabPane>
                    <Tabs.TabPane key={3} title={'充值记录'}>
                         <TakeNote></TakeNote> 
                    </Tabs.TabPane>
            </Tabs>

        </>
    )
}
